<template>
  <a-form name="customized_form_controls" layout="inline" :model="table">
    <a-form-item name="state" label="码表状态">
      <a-select v-model:value="table.status" allow-clear style="width: 100px" :options="options" @change="handleChange"></a-select>
    </a-form-item>
    <a-form-item name="stopwatch_name" label="码表名称">
      <a-input v-model:value="table.searchName" style="width: 100px"></a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" ghost @click="reset">重置</a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" @click="searchCodeTables">查询</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
  import { CodeTableStatus } from '@/enums/statusEnum';
  import { getListHooks } from '@/hooks/CodeTablesHooks/getstopwatchDataHooks';
  // import { message } from 'ant-design-vue';
  // 选择器的三种状态
  const options: {
    value: number;
    label: String;
  }[] = [
    {
      value: CodeTableStatus.未发布,
      label: '未发布',
    },
    {
      value: CodeTableStatus.已发布,
      label: '已发布',
    },
    {
      value: CodeTableStatus.已停用,
      label: '已停用',
    },
  ];
  // 获取到选择状态
  const handleChange = (value: number) => {
    console.log(`selected ${value}`);
    table.status = value;
  };

  // 使用hooks
  const { getData, table } = getListHooks();
  // 请求接口--模糊查询
  const searchCodeTables = async () => {
    table.num = 1;
    table.size = 10;
    await getData();
  };
  // 重置输入框
  const reset = async () => {
    table.searchName = '';
    table.status = undefined;
    table.num = 1;
    table.size = 10;
    await getData();
  };
</script>

<style lang="less" scoped></style>
